<template>
  <div class="orderAllot">
    <!-- 顶部查询表单 -->
    <div class="topForm">
      <el-form ref="searchForm" :model="searchForm" inline="true" size="mini" class="searchBox">
        <el-row>
          <el-col :span="4">
            <el-form-item label="订单号：" prop="odcCode">
              <el-input v-model="searchForm.odcCode" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="委托人：" prop="odcConsigner" label-width="70px">
              <el-input v-model="searchForm.odcConsigner" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="下单时间：" prop="ordCreatetimeStart" label-width="90px">
              <el-date-picker v-model="searchForm.ordCreatetimeStart" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="~" prop="ordCreatetimeEnd" label-width="10px">
              <el-date-picker v-model="searchForm.ordCreatetimeEnd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="4">
            <el-form-item label="创建人：" prop="odcCreator">
              <el-select v-model="searchForm.odcCreator" placeholder="请选择状态" filterable clearable>
                <el-option
                  v-for="item in buildPeopleList"
                  :key="item.ORD_CREATOR"
                  :label="item.ORD_CREATOR"
                  :value="item.ORD_CREATOR"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="1">
            <el-form-item>
              <el-button type="primary" @click="searchBtn">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页主体表格 -->
    <div class="tableBox">
      <div class="tableBoxTitle">订单信息列表</div>
      <!-- 上方订单信息列表表格 -->
      <div class="topTable">
        <el-table :data="mainTopTableData" border :height="mainTopHeight" :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="mainTopRowClick">
          <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
          <el-table-column prop="ORD_STATUS_NAME" label="订单状态" width="200px" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="ORD_CREATETIME" label="下单时间" width="200px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ORD_CODE" label="订单号" width="200px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="GOD_ORIGINE" label="发货地" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="GOD_DESTINATION" label="目的地" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ODC_CLT_NAME" label="客户" width="200px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ODC_CONSIGNER" label="委托人" width="200px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="GOD_OWNER" label="货主" width="120px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ODC_LINKPERSON" label="联系人" width="130px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ODC_LINKPHONE" label="联系电话" width="130px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ODC_TEL" label="手机" width="130px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ORD_COUNTPRICE" label="应收价格" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ORD_YF" label="应付价格" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="ODC_SOURCE" label="来源" width="110px" show-overflow-tooltip sortable >
            <template slot-scope="scope">
                  <span v-if="scope.row.ODC_SOURCE =='OFFLINE'">线下</span>
                  <span v-if="scope.row.ODC_SOURCE =='ONLINE'">线上</span>
              </template>
          </el-table-column>
          <el-table-column prop="ORD_CREATOR" label="创建人" width="90px" show-overflow-tooltip sortable ></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          ref="pagination"
          small
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Pagination.currentPage"
          :page-sizes="Pagination.pageSizeList"
          :page-size="Pagination.PageSize"
          :layout="Pagination.layout"
          :total="Pagination.total">
        </el-pagination>
      </div>
      <!-- 下方订单详情表格 -->
      <div class="botTable">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="订单详情" name="1">
            <div class="orderDetailBtnBox">
              <el-button plain size="mini" type="primary" @click="getOrder">供应商接单</el-button>
              <el-button plain size="mini" type="primary" @click="delGetOrder">取消供应商接单</el-button>
              <el-button plain size="mini" type="primary" @click="carInfoBtn">拖车信息补录</el-button>
            </div>
            <el-table :data="mainBotTableData" border :height="mainBotHeight" :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }" highlight-current-row  @selection-change="handleSelectionChange" @row-click="mainBotRowClick">
              <el-table-column type="selection" align="center" label="序号 " width="50"></el-table-column>
              <el-table-column prop="OPT_TYPE_NAME" label="操作类型" show-overflow-tooltip sortable></el-table-column>
              <el-table-column prop="OPT_STARTPLACE" label="起始地" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="OPT_ENDPLACE" label="目的地" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="OOP_STATUS_NAME" label="操作状态" show-overflow-tooltip  sortable ></el-table-column>
              <el-table-column prop="OPT_WFSUPPLIER" label="物流服务商" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="OPT_CHANGER" label="分配人" show-overflow-tooltip  sortable></el-table-column>
              <el-table-column prop="OPT_CHANGETIME" label="分配时间" show-overflow-tooltip sortable ></el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

    <!-- 供应商接单弹出框 -->
    <el-dialog :title="dialogTitle" :visible.sync="mainDialog" v-if="mainDialog" width="60%" @close="dialogClose" :close-on-click-modal='false' v-el-drag-dialog>
      <div class="dialogBox">
        <!-- 货信息表格 -->
        <div class="goodsInfoBox">
          <div class="goodsInfoBoxTitle">货信息</div>
          <el-table :data="goodsInfoTableData" border :height="goodsInfoTableHeight" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" highlight-current-row>
            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
            <el-table-column prop="GOD_OWNER" label="委托人" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="GOD_CNNAME" label="中文品名" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="GOD_INNAME" label="英文品名"  show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="GOD_NUM" label="件数" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="GOD_WEIGHT" label="重量" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="GOD_WEIGHTUNIT" label="重量单位" show-overflow-tooltip sortable >
               <template>
                  <span v-if="GOD_WEIGHTUNIT ==null">KG</span>
              </template>
            </el-table-column>
            <el-table-column prop="GOD_VOLUME" label="体积" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="GOD_VOLUMNUNIT" label="体积单位" show-overflow-tooltip sortable >
                <template>
                  <span v-if="GOD_VOLUMNUNIT ==null">m³</span>
              </template>
            </el-table-column>
            <el-table-column prop="GOD_PACKED_NAME" label="包装" show-overflow-tooltip sortable ></el-table-column>
          </el-table>
        </div>
        <!-- 服务信息表格 -->
        <div class="serveInfoBox">
          <!-- 左侧服务信息表格 -->
          <div class="serveLeft">
            <div class="goodsInfoBoxTitle">服务信息</div>
            <el-table :data="serveInfoTableData" border :height="serveInfoTableHeight" :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }" highlight-current-row>
              <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
              <el-table-column prop="OPT_TYPE_NAME" label="操作类型" show-overflow-tooltip sortable></el-table-column>
              <el-table-column prop="OR_STARTPLACE" label="起始地" show-overflow-tooltip sortable ></el-table-column>
              <el-table-column prop="OR_ENDPLACE" label="目的地"  show-overflow-tooltip sortable ></el-table-column>
            </el-table>
          </div>
          <!-- 右侧费用信息表格 -->
          <div class="serveRight">
            <div class="goodsInfoBoxTitle">费用信息</div>
            <div class="goodsInfoBtnBox">
              <el-button plain size="mini" type="success" @click="feeAdd">新增</el-button>
              <el-button plain size="mini" type="danger" @click="feeDel">删除</el-button>
            </div>
            <el-table :data="feeInfoTableData" border :height="feeInfoTableHeight" @row-click="mainTopRowClickA"  :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }" highlight-current-row>
              <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
              <el-table-column prop="PTP_CURRENCY" label="币种" show-overflow-tooltip sortable>
                <template slot-scope="scope">
                  <el-select v-model="scope.row.PTP_CURRENCY" clearable size="mini">
                    <el-option
                      v-for="item in moneyCateList"
                      :key="item.label"
                      :label="item.value"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="PTP_PRICE" label="价格" show-overflow-tooltip  >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.PTP_PRICE" clearable size="mini"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 供应商列表表格数据 -->
        <div class="providerBox">
          <div class="providerTop">
            <el-form ref="providerForm" :model="providerForm" inline="true" size="mini">
              <el-row>
                <el-col :span="7">
                  <el-form-item label="供应商代码：" prop="providerCode" label-width="90">
                    <el-input v-model="providerForm.providerCode" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="类型：" prop="providerStyle">
                    <el-select v-model="providerForm.providerStyle" multiple placeholder="请选择类型" filterable clearable>
                      <el-option
                        v-for="item in providerStyleList"
                        :key="item.RV_LOW_VALUE"
                        :label="item.RV_CMEANING"
                        :value="item.RV_LOW_VALUE"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button type="primary" size="mini" @click="search">查询</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <el-table :data="providerTableData" border :height="providerTableHeight" @row-click="mainTopRowClickB"  :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" highlight-current-row>
            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
            <el-table-column prop="FLT_CODE" label="供应商代码"  show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="FLT_NAME" label="供应商名称"  show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="FLT_TYPES" label="类型" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="FLT_LINKPERSON" label="联系人"  show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="FLT_LINKPHONE" label="联系电话"  show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="FLT_TAXPAYER" label="纳税人识别号"  show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayContact" label="供应商KPI指标"  show-overflow-tooltip sortable ></el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mainDialog = false">关闭</el-button>
        <el-button type="primary" @click="dialogSave">保存</el-button>
      </span>
    </el-dialog>

    <!-- 拖车信息补录弹窗 -->
    <el-dialog title="拖车信息补录" :visible.sync="carInfoDialog" v-if="carInfoDialog" width="50%" :close-on-click-modal='false' v-el-drag-dialog>
      <div class="carInfoDialogBox">
        <el-form ref="carInfoForm" :model="carInfoForm" :rules="carInfoRules" label-width="190px" :inline="true" size="mini">
          <el-row>
            <el-col :span="12">
              <el-form-item label="船名/车皮号：" prop="optVessel">
                <el-input v-model="carInfoForm.optVessel" maxlength="15"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="航次/车次：" prop="optVoyageno">
                <el-input v-model="carInfoForm.optVoyageno" maxlength="15"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="提单号：" prop="optBllno">
                <el-input v-model="carInfoForm.optBllno"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="船期：" prop="optVoyagedate">
                 <el-date-picker v-model="carInfoForm.optVoyagedate" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="船公司：" prop="optShipcompany">
                <el-select v-model="carInfoForm.optShipcompany" placeholder="请选择类型" filterable clearable>
                  <el-option
                    v-for="item in shipCompanyList"
                    :key="item.SPL_SHORTNAME"
                    :label="item.SPL_SHORTNAME"
                    :value="item.SPL_SHORTNAME"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预计做箱时间/装车时间：" prop="optBoxdate" label-width="190px">
                 <el-date-picker v-model="carInfoForm.optBoxdate" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="carInfoDialog = false">关闭</el-button>
        <el-button type="primary" @click="carInfoDialogSave">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  orderAllotList,
  orderAllotData,
  createUserListMethod,
  orderAllotJd,
  orderAllotQx,
  orderAllotCx,
  orderAllotXlList,
  orderAllotBc,
  orderAllotJdList,
  typeData,
  orderAllotXldel,
  orderAllotXladd
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'

export default {
  name: 'router.orderAllot',
  mixins: [resizeMixin, paginationMixin],
  data() {
    return {
      itemData:'',
      searchForm: {
        odcCode: '', // 订单号
        odcConsigner: '', // 委托人
        ordCreatetimeStart: '', // 下单时间  开始
        ordCreatetimeEnd: '', // 下单时间  结束
        odcCreator: '', // 创建人
      },
      placeLists: [], // 起始地，目的地下拉框数据
      statusPlace: [], // 状态下拉框数据
      mainTopTableData: [], // 主页上方 解决方案表格数据
      mainTopHeight: 400, // 主页上方 表格高度
      mainBotTableData: [], // 主页下方 解决方案表格数据
      mainBotHeight: 230, // 主页上方 表格高度
      activeNames: ['1'], // 控制主页下方 解决方案明细表格的展示

      dialogTitle: '', // 供应商接单弹窗标题
      mainDialog: false, // 控制供应商接单弹窗的出现与隐藏
      goodsInfoTableData: [], // 弹窗货信息表格数据
      goodsInfoTableHeight: 200, // 弹窗货信息表格高度
      serveInfoTableData: [], // 弹窗服务信息表格数据
      serveInfoTableHeight: 180, // 弹窗服务信息表格高度
      feeInfoTableData: [], // 弹窗费用信息表格数据
      feeInfoTableHeight: 147, // 弹窗费用信息表格高度
      providerForm: {
        providerCode: '', // 供应商代码
        providerStyle: '', // 类型
      },
      providerTableData: [], // 供应商表格数据
      providerTableHeight: 300, // 供应商表格高度
      carInfoDialog:false, // 控制拖车信息补录弹窗展示
      carInfoForm: {
        optVessel: '', // 船名车皮号
        optVoyageno: '', // 航次车次
        optBllno: '', // 提单号
        optVoyagedate: '', // 船期
        optShipcompany: '', // 船公司
        optBoxdate: '', // 预计做箱时间 装车时间
      },
      carInfoRules:{
        optVessel: [
          { required: true, message: '请输入船名/车皮号', trigger: 'blur' },
        ],
        optVoyageno: [
          { required: true, message: '请输入航次/车次', trigger: 'blur' },
        ],
        optBllno: [
          { required: true, message: '请输入提单号', trigger: 'blur' },
        ],
        optBoxdate: [
          { required: true, message: '请输入预计做箱时间/装车时间', trigger: 'blur' },
        ],
      },

      moneyCateList: [{label:'1',value: 'RMB'},{label:'2',value: 'USD'}], // 币种下拉框数据
      buildPeopleList: [], // 创建人下拉框数据
      providerStyleList: [], // 供应商类型下拉框
      shipCompanyList: [], // 船公司下拉框数据
      getOrderData:[],//下半部分列表当前行数据
      typeData:[],
      gysData:[],
    }
  },
  computed: {
  },
  created(){
    this.refreshList()
    this.cjrData()
    this.LXData()
  },
  mounted() {
  },
  methods: {
    //类型下拉
    LXData(){
      typeData().then(res=>{
        this.providerStyleList = res.data
      })
    },
    //创建人下拉框
    cjrData(){
      createUserListMethod().then(res=>{
        this.buildPeopleList = res.data
      })
    },
    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      orderAllotList({
        odcCode: this.searchForm.odcCode, // 订单号
        odcConsigner:this.searchForm.odcConsigner, // 委托人
        ordCreatetimeStart: this.searchForm.ordCreatetimeStart, // 下单时间  开始
        ordCreatetimeEnd: this.searchForm.ordCreatetimeEnd, // 下单时间  结束
        odcCreator: this.searchForm.odcCreator, // 创建人
        PageIndexs:this.Pagination.currentPage.toString(),
        PageSizes:this.Pagination.pageSize.toString()
      }).then(response => {
        this.mainTopTableData = response.data.FTKJWLHYPT
        updateTotal(Number(response.data.total.FTKJWLHYPT))
      })
    },
    // 主页搜索
    searchBtn() {
      this.refreshList()
    },
    //点击请求下部分列表
    mainTopRowClick(row){
      this.typeData = row
      this.orderAllotDataA()
    },
    orderAllotDataA(){
      orderAllotData({ordId:this.typeData.ORD_ID}).then(res=>{
        this.mainBotTableData = res.data
      })
    },
    // 供应商接单
    getOrder() {
      if(Object.keys(this.getOrderData).length == 0){
        this.$alert('请选择需要接单的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(this.getOrderData[0].OOP_STATUS_NAME == '已分配'){
        this.$alert('数据已分配,无法再次分配！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.dialogTitle = '供应商分配'
      this.mainDialog = true
      let type = []
      this.getOrderData.forEach(item=>{
        type.push(item.OPT_ID)
      })
      orderAllotJd({odcId:this.typeData.ORD_ODC_ID,opdId:type,ordId:this.getOrderData[0].ORD_ID}).then(res=>{
        this.goodsInfoTableData =res.data.orderGoods
        this.serveInfoTableData = res.data.fuxx
        this.feeInfoTableData  = res.data.fyxx
      }),
      this.getOrderList()
    },
    //供应商接单弹出框下面列表
    getOrderList(){
      orderAllotJdList({code:this.providerForm.providerCode,name:this.providerForm.providerStyle}).then(res=>{
        this.providerTableData = res.data
      })
    },
    //搜索
    search(){
      this.getOrderList()
    },
    // 取消供应商接单
    delGetOrder() {

      if(Object.keys(this.getOrderData).length == 0){
        this.$alert('请选择需要取消的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(this.getOrderData.length > 1){
        this.$alert('每次只能取消一行数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(this.getOrderData[0].OOP_STATUS_NAME == '未分配'){
        this.$alert('目的地拖车未分配,无法再次取消供应商接单！', '提示', {
          confirmButtonText: '确定'
        })
      }
      if(this.getOrderData[0].OOP_STATUS_NAME == '已分配'){
        this.$alert('确认要取消此数据吗？', '提示', {
          confirmButtonText: '确定'
        }).then(()=>{
          let newArr = []
          this.getOrderData.forEach(item => {
            newArr.push(item.OPT_ID)
          })
          let newStr = newArr.join(',')
          orderAllotQx({optId:newStr,ordcode: this.typeData.ORD_CODE}).then(()=>{
            this.$message({
              type: 'success',
              message: '取消成功'
            })
            this.orderAllotDataA()
          })

        })

      }
    },
    // 拖车信息补录
    carInfoBtn() {
      if(Object.keys(this.getOrderData).length == 0){
        this.$alert('请选择需要信息补录的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(this.getOrderData.length > 1){
        this.$alert('每次只能修改一行数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(this.getOrderData[0].OOP_STATUS_NAME == '已分配' && this.getOrderData[0].OPT_TYPE_NAME == '发货地拖车'){
        this.$alert('供应商已接单，不可编辑补录信息！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(this.getOrderData[0].OOP_STATUS_NAME == '已分配' && this.getOrderData[0].OPT_TYPE_NAME == '目的地拖车'){
        this.$alert('供应商已接单，不可编辑补录信息！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      if(this.getOrderData[0].OPT_TYPE_NAME !== '发货地拖车' && this.getOrderData[0].OPT_TYPE_NAME !== '目地地拖车'){
        this.$alert('该操作仅用于拖车服务！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      // if(this.getOrderData.OPT_TYPE_NAME != '目地地拖车'){
      //   this.$alert('该操作仅用于拖车服务！', '提示', {
      //     confirmButtonText: '确定'
      //   })
      //   return
      // }
      this.carInfoDialog = true
      orderAllotCx({optId:this.getOrderData[0].OPT_ID}).then(res=>{
        this.carInfoForm.optVessel = res.data.optVessel || ''
        this.carInfoForm.optVoyageno = res.data.optVoyageno || ''
        this.carInfoForm.optBllno = res.data.optBllno || ''
        this.carInfoForm.optVoyagedate = res.data.optVoyagedate || ''
        this.carInfoForm.optShipcompany = res.data.optShipcompany || ''
        this.carInfoForm.optBoxdate = res.data.optBoxdate || ''
      })
      this.cgsData()
    },
    //船公司下拉框
    cgsData(){
      orderAllotXlList({splCode:'',splName:''}).then(res=>{
        this.shipCompanyList = res.data
      })
    },
    //下方列表当前行数据
    // mainBotRowClick(row){
    //   this.getOrderData = row
    // },
    handleSelectionChange(row){
      this.getOrderData = row
    },
    // 监听弹窗关闭事件
    dialogClose() {
      this.feeInfoTableData = []
    },
    // 监听主页下方表格的展示
    handleChange(val) {
      if(val.length == 0) {
        this.mainTopHeight = 660
      }else {
        this.mainTopHeight = 400
      }
    },
    // 弹窗保存按钮
    dialogSave() {
      let typeData = ''
      let typeItem = ''
      this.feeInfoTableData.forEach(item=>{
        typeData = item.PTP_CURRENCY
        typeItem = item.PTP_PRICE
      })
      var frtOrderPrice =
        {
          ptpId:this.itemData.PTP_ID,
          ptpOrdId:this.getOrderData[0].ORD_ID,
          ptpCurrency:typeData,
          ptpPrice:typeItem,
        }
      let optId = []
      let odcPdtId=this.typeData.ODC_PDT_ID
      this.getOrderData.forEach(item=>{
        optId.push(item.OPT_ID)
      })
      let type = Object.assign(
        {opdId:optId},
        {odcPdtId:odcPdtId},
        {eptId:this.gysData.FLT_ID},
        frtOrderPrice
      )
      orderAllotXladd(type).then((res)=>{
        this.$message.success(res.msg)
        this.mainDialog = false
        this.orderAllotDataA()
      })
    },
    mainTopRowClickB(row){
      this.gysData = row
    },
    // 拖车信息补录弹窗保存按钮
    carInfoDialogSave() {
      this.$refs.carInfoForm.validate(valid => {
        if(valid) {
          let typeData = Object.assign(
            {
              optId:this.getOrderData[0].OPT_ID,
              optType:this.getOrderData[0].OPT_TYPE,
              optOrdcode:this.getOrderData[0].OPT_ORDCODE
            },
            this.carInfoForm)
          orderAllotBc(typeData).then(() =>{
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.carInfoDialog = false
            this.orderAllotDataA()
          })
        }
      })

    },
    // 供应商接单弹窗  费用信息表格 新增按钮
    feeAdd() {
      let list = {
        moneyCate: '',
        price: ''
      }
      this.feeInfoTableData.unshift(list)
    },
    // 供应商接单弹窗  费用信息表格 删除按钮
    feeDel() {
      // this.feeInfoTableData =  this.feeInfoTableData.filter(item => {
      //   return item != this.itemData
      // })
      // this.itemData = ''
      orderAllotXldel({ptpId:this.itemData.PTP_ID}).then(()=>{
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getOrder()
      })
    },
    mainTopRowClickA(row){
      this.itemData = row
    },
  }
}
</script>

<style lang="scss" scoped>
.orderAllot {
  .topForm {
    padding-top: 10px;
  }
  .btnBox {
    padding-left: 10px;
  }
  .tableBox {
    .tableBoxTitle {
      padding-left: 10px;
      color: #666;
      font-size: 14px;
    }
    .topTable {
      padding-top: 10px;
    }
    .block {
      height: 40px;
    }
    .botTable {
      ::v-deep.el-collapse-item__header {
        padding-left: 10px;
      }
      .orderDetailBtnBox {
        margin-bottom: 5px;
        padding-left: 10px;
      }
    }
  }
}
// 顶部搜索表单样式
::v-deep .searchBox {
  .el-form-item {
    display: flex;
    justify-content: space-between;
  }
}

// 弹窗内的样式
.dialogBox {
  width: 100%;
  .goodsInfoBox {
    margin-bottom: 15px;
  }
  .serveInfoBox {
    width: 100%;
    height: 240px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .serveLeft {
      width: 64%;
      height: 100%;
    }
    .serveRight {
      width: 35%;
      height: 100%;
      .goodsInfoBtnBox {
        margin-bottom: 5px;
        padding-left: 10px;
      }
    }
  }
  .providerBox {
    margin-top: 10px;
  }
}
.goodsInfoBoxTitle {
  width: 100%;
  height: 30px;
  background-color: #666;
  color: #fff;
  line-height: 30px;
  padding-left: 10px;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}

// 拖车信息补录弹窗样式
.carInfoDialogBox {
  ::v-deep .el-input__inner {
    width: 178px;
  }
}
</style>
